<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      /*  div{
            text-align: center;
        }
        .top{
            font-size: 100px;
            background-color: #33cccc;
        }*/
      /*  .nav{
            font-size: 200px;
            background-color: #666;
        }*/
        .main{
            width: 1000px;
            margin:0 auto;
            /*background-color: #CC00FF;*/
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                if($(document).scrollTop()>=$(".top").height()){
                    $(".nav").css("position","fixed").css("top",0);
                    $(".main").css("marginTop",$(".nav").height());
                }else {
                    $(".nav").css("position","static");
                    $(".main").css("marginTop",0);
                }
            });
        });
    </script>
</head>
<body>
<div class="top"><img src="images/top.png" alt=""></div>
<div class="nav"><img src="images/nav.png" alt=""></div>
<div class="main"><img src="images/main.png" alt=""></div>

</body>
</html>